<template>
	<div style="background-color: rgb(246 248 250);display: flex;flex-direction: column;">

		<uv-sticky>
			<div style="display: flex;background-color: rgb(255 255 255);">
				<uv-tabs style="flex:1;" :list="state.topTabs" @click="events.topTabsClick"></uv-tabs>
				<uv-search shape="round" :showAction="false" :disabled="true" @click="events.searchFunc"></uv-search>
			</div>
		</uv-sticky>

		<div style="flex:1;">
			<div v-for="item in state.topTabs[state.tabIndex].list"
				style="background-color: rgb(255 255 255);margin: 0px 10px 10px 10px;border-radius: 10px;padding: 10px;font-size: 14px;"
				@click="events.changeCard(item)">
				<div style="display: flex;align-items: center;">
					<div style="flex:1;display: flex;">
						<div
							style="font-size: 16px;font-weight: bold;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-overflow: ellipsis;">
							{{item.articleMain.title}}
						</div>
						<div style="padding-left: 10px;">
							<uv-icon v-if="item.collect.isCheck" name="star-fill" color="rgb(49, 167, 255)" size="22"
								:label="item.collect.count"></uv-icon>
							<uv-icon v-else name="star" size="22" :label="item.collect.count"></uv-icon>
						</div>
					</div>
					<div style="display:flex;align-items: center;">
						<uv-avatar size="25" :src="item.articleUser.avatar"></uv-avatar>
						<b style="padding-left: 5px;">{{item.articleUser.name}}</b>
					</div>
				</div>
				<div
					style="overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;text-overflow: ellipsis;padding-top: 10px;">
					<uv-parse style="max-height: 15rem;" :content="item.articleMain.text"></uv-parse>
				</div>
				<div style="display: flex;justify-content:space-between;padding-top: 10px;font-size: 12px;">
					<div style="display: flex;justify-content: center;align-items: center;">
						<div>
							<uv-icon name="edit-pen" size="17" :label="item.subCount"></uv-icon>
						</div>
						<div style="padding: 0px 5px;">▪</div>
						<div>
							<uv-icon name="chat" size="17" :label="item.remarkCount"></uv-icon>
						</div>
						<div style="padding: 0px 5px;">▪</div>
						<div>
							<uv-icon v-if="item.thumbs.isCheck" name="thumb-up-fill" color="rgb(49, 167, 255)" size="17"
								:label="item.thumbs.count"></uv-icon>
							<uv-icon v-else name="thumb-up" size="17" :label="item.thumbs.count"></uv-icon>
						</div>
					</div>
					<div>{{item.articleMain.updateTime}}</div>
				</div>
			</div>

		</div>

		<uv-load-more :status="state.isLoading" dashed line color="#3f89fe" lineColor="#3f89fe"
			@loadmore="events.bottomLoadingFunc"></uv-load-more>
		<!-- 		<div style="height: 40px;width: 100%;margin-top: -10px;">
			<uv-button v-if="state.isLoading" loading text="加载中..." plain hairline></uv-button>
			<uv-button v-else text="点击加载" plain hairline @click="events.bottomLoadingFunc"></uv-button>
		</div> -->
		<uv-notify ref="notifyRef"></uv-notify>
	</div>
</template>

<script>
	import {
		reactive,
		ref
	} from 'vue'
	import {
		onShow,
		onLoad,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		getTitleNewLsit
	} from '../../api/index';
	import {
		toDateString
	} from "xe-utils"

	export default {
		setup() {
			const state = reactive({
				iv: toDateString(new Date(), "yyyy-MM-ddTHH:mm:ss"),
				value: 0,
				tabIndex: 0,
				topTabs: [{
						name: '最新',
						pageIndex: 1,
						list: []
					},
					{
						name: '推荐',
						pageIndex: 1,
						list: []
					},

					// {
					// 	name: '关注',
					// }
				],
				isPull: false,
				isLoading: 'loadmore',

			})
			const notifyRef = ref(null);


			onLoad(async () => {
				await events.getTitleLsitFunc(true);
			});



			onPullDownRefresh((e) => {
				setTimeout(async function() {
					state.iv = toDateString(new Date(), "yyyy-MM-ddTHH:mm:ss");
					await events.getTitleLsitFunc(true);
					uni.stopPullDownRefresh();
				}, 2000);
			})

			onReachBottom((e) => {
				events.bottomLoadingFunc();
			})

			const events = {
				/**
				 * 触底以及点击加载
				 */
				bottomLoadingFunc: () => {
					if (state.isLoading == "loadmore") {
						state.isLoading = "loading";
						setTimeout(async function() {
							await events.getTitleLsitFunc();
							state.isLoading = "loadmore";
						}, 2000);
					}
				},
				/**
				 * 获取文章信息
				 * @param {Object} isRefresh
				 */
				getTitleLsitFunc: async function(isRefresh) {
					switch (state.tabIndex) {
						case 0:
							await methods.getTitleNewLsitFunc(isRefresh);
							break;
						default:
							break;
					}
				},
				/**
				 * 点击文章
				 * @param {Object} e
				 */
				changeCard: function(e) {
					console.log(e);

					if (e) {
						const articleSubId = e.articleMain.articleSubId;
						const articleMainId = e.articleMain.articleMainId;
						uni.navigateTo({
							url: `/pages/subTitle/index?mainId=${articleMainId}&subId=${articleSubId}`
						})
					}

				},
				/**
				 * 文章标题切换
				 */
				topTabsClick: function({
					index
				}) {
					state.tabIndex = index;
				},
				searchFunc: function(e) {
					console.log("搜索", e);
				}
			}

			const methods = {
				/**
				 * 获取最新文章
				 */
				getTitleNewLsitFunc: async (isRefresh) => {
					let tabData = state.topTabs[0];

					if (isRefresh) {
						tabData.pageIndex = 1;
						tabData.list = [];
					}

					if (tabData.pageIndex != null) {
						const {
							done,
							data
						} = await getTitleNewLsit(tabData.pageIndex, state.iv);
						if (done) {

							tabData.list = data.list;

						} else {
							notifyRef.value.success('网络异常,请重新尝试');
						}
					}
					console.log("state.topTabs", state.topTabs, tabData);
				}
			}

			return {
				state,
				notifyRef,
				events
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.changeabc {
		color: #4d87d3;
	}
</style>